<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:fragment="head(title)">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"/>
        <!-- 图标 -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css">
        <link rel="stylesheet" th:href="@{/css/common.css}" href="../../static/css/common.css">
        <title th:text="${title}">西安旅游</title>
    </head>
    <body>
        <div th:fragment="navbar(active)" class="header bg-white mb-3 shadow-sm">
            <nav class='container navbar navbar-expand-lg navbar-light bg-white'>
                <a class='header-title navbar-brand text-warning' href='#' th:href="@{/}"
                   style="color: #333333">西安旅游</a>
                <button class='navbar-toggler' type='button' data-toggle='collapse'
                        data-target='#navbarSupportedContent' aria-controls='navbarSupportedContent'
                        aria-expanded='false' aria-label='Toggle navigation'>
                    <span class='navbar-toggler-icon'></span>
                </button>
                <div class='collapse navbar-collapse' id='navbarSupportedContent'>
                    <ul class='navbar-nav mr-auto'>
                        <li class="nav-item" th:classappend="${active == 1} ? 'active' : ''">
                            <a class="nav-link" href="#" th:href="@{/}">首页</a>
                        </li>
                        <li class="nav-item" th:classappend="${active == 2} ? 'active' : ''">
                            <a class="nav-link" href="#" th:href="@{/site/list}">旅游景点</a>
                        </li>
                        <li th:if="${session.USER != null}" class="nav-item"
                            th:classappend="${active == 3} ? 'active' : ''">
                            <a class="nav-link" href="#" th:href="@{/order/list}">订单中心</a>
                        </li>
                    </ul>
                    <div th:if="${session.USER == null}" class="float-right mx-3">
                        <a class="btn btn-link text-warning text-decoration-none" href="#"
                           th:href="@{/user/login}">登录</a>
                        <span>|</span>
                        <a class="btn btn-link text-warning text-decoration-none" href="#"
                           th:href="@{/user/register}">注册</a>
                    </div>
                    <div th:if="${session.USER != null}" class="float-right mx-3">
                        <span>
                            <span>用户: </span>
                            <span class="text-primary" th:text="${session.USER.userNickname}"></span>
                        </span>
                        <span class="ml-2">
                            <button onclick="logout()" class="btn btn-link text-decoration-none text-warning">
                                退出登录
                            </button>
                        </span>
                    </div>
                </div>
            </nav>
        </div>

        <!-- 底部 -->
        <footer th:fragment="footer" class="navbar-fixed-bottom mt-5 text-muted small">
            <div class="bg-dark text-center">
                <div class="p-1">欢迎来西安旅游</div>
                <div class="p-1">邮箱: 1241088536@qq.com</div>
                <div class="p-1">备案号: 陕xxxxx</div>
            </div>
        </footer>

        <th:block th:fragment="commonJs">
            <script src='https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js'></script>
            <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
            <script th:src="@{/js/bootstrapQ.js}" src='../static/js/bootstrapQ.js'></script>
            <script th:inline="javascript">
                // 退出登录
                function logout() {
                    $.post(/*[[@{/user/logout.do}]]*/'', (response) => {
                        location.href = /*[[@{/}]]*/'';
                    });
                }
            </script>
        </th:block>
    </body>
</html>